<template>
  <div class="adminModal-box mask flex-column"
        v-loading="isLoading"
        element-loading-text="拼命加载中"
        element-loading-background="rgba(0, 0, 0, 0.2)">
    <div class="adminModal">
      <div class="header-box flex-row">
        <div class="title">admin面板</div>
        <div @click="closeAdminModal" class="cp icon-box">
          <i class="el-icon-close"></i>
        </div>
      </div>

      <div class="content-box flex-column mt10">
        <!-- <div class="content-item flex-row flex-h-center">
          <el-button size="small" style="width: 92%;" type="primary" @click="updateBlogParticiple">全量同步分词</el-button>
        </div> -->
        <div class="content-item flex-row mt20 ml20">
          <div style="color: #4173ff;">博客Id:
            <el-input-number v-model="id" @change="changeBlogId" label="描述文字" size="small"></el-input-number>
          </div>
          <div class="ml10">
            <el-button size="small" type="primary" @click="updateBlogParticipleById">同步分词</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import httpUtil from '@utils/HttpUtil'

export default {
  name: 'AdminModal',
  data() {
    return {
      isLoading: false,
      id: 1
    }
  },
  methods: {
    changeBlogId(id) {
      this.id = id
    },
    closeAdminModal() {
      this.$emit('closeAdminModal')
    },
    updateBlogParticipleById() {
      this.isLoading = true
      const url = this.$ServerIP + `/api/blogs/updateParticipleById/${this.id}`
      httpUtil.get(url).then(json => {
        const { status } = json
        if (status === -1) {
          this.$message({
            message: '服务器异常',
            type: 'error'
          })
          return
        }
        const { dataset: { count } } = json
        if (count === -1) {
          this.$message({
            message: 'blogId不存在',
            type: 'error'
          })
          return
        }
        this.$message({
          message: '同步成功',
          type: 'success'
        })
      }).finally(() => {
        this.isLoading = false
      })
    }
    // updateBlogParticiple() {
    //   this.isLoading = true
    //   const url = this.$ServerIP + '/api/blogs/initParticiple'
    //   httpUtil.get(url).then(json => {
    //     const { status, dataset: { count } } = json
    //     if (status === 1) {
    //       this.$message({
    //         message: `同步成功,共更新${count}条记录`,
    //         type: 'success'
    //       })
    //     } else {
    //       this.$message({
    //         message: '同步失败',
    //         type: 'error'
    //       })
    //     }
    //   }).finally(() => {
    //     this.isLoading = false
    //   })
    // }
  }
}
</script>

<style scoped lang="less">
.adminModal-box {
  .adminModal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 436px;
    background: #f6f8fa;
    border: solid 1px #4173ff;
    .header-box {
      justify-content: space-between;
      padding: 10px;
      .title {
        position: relative;
        padding-left: 16px;
        &::after {
          position: absolute;
          top: 0;
          left: 4px;
          content: "";
          width: 4px;
          height: 16px;
          background: #4173ff;
        }
      }
      .icon-box {
        .i {
          color: red;
          font-size: 30px;
          cursor: pointer;
          &.hover {
            color: #4173ff;
          }
        }
        &.hover{
          i{
             color: #4173ff;
          }
        }
      }
    }
  }
}
</style>